<!-- userWallQuery -->
<template>
  <div class="incomeQuery content_box">
    <div class="header_row flex align-center flex-wrap" v-if="hasBtn('userWallQuery:query')">
      <div class="flex align-center m-r-2">
        <span>用户名：</span>
        <el-input v-model="searchObj.UserName" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="flex align-center m-r-2">
        <span>手机号：</span>
        <el-input v-model="searchObj.UserPhone" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="flex align-center m-r-2">
        <span>直属上级：</span>
        <el-input v-model="searchObj.ParentName" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="flex align-center m-r-2">
        <span>交易状态：</span>
        <el-select v-model="searchObj.State" placeholder="请选择" clearable>
          <el-option v-for="item of StateOptions" :key="item.EnumName" :label="item.Desction" :value="item.EnumName">
          </el-option>
        </el-select>
      </div>
      <div class="flex align-center m-r-2">
        <span>交易类型：</span>
        <el-select v-model="searchObj.Type" placeholder="请选择" clearable>
          <el-option v-for="item of TypeOptions" :key="item.Skey" :label="item.Svalue" :value="item.Skey">
          </el-option>
        </el-select>
      </div>

      <div class="flex align-center m-r-2">
        <span>所属分公司：</span>
        <el-select v-model="searchObj.OrgName" placeholder="请选择" clearable>
          <el-option v-for="item in comOptions" :key="item.Id" :label="item.OrgName" :value="item.OrgName">
          </el-option>
        </el-select>
      </div>
      <div class="flex align-center m-r-2">
        <span>时间区间：</span>
        <el-date-picker v-model="searchObj.timeValue" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
        </el-date-picker>
      </div>

      <el-button type="primary" @click="(searchObj.PageIndex = 1), getListFun()">查询</el-button>
    </div>

    <div class="m-b-1 neck_box flex align-center space-between">
      <div class="font">当前收益汇总: {{sum|ToFixed}} 元</div>
      <div>
        <!-- <el-button type="danger">批量删除</el-button> -->
        <el-button type="warning" disabled v-if="hasBtn('userWallQuery:export')">导出列表</el-button>
      </div>

    </div>
    <el-table stripe :data="tableData" border ref="myTable" style="width: 100%" @sort-change="sortChange" sortable="custom" v-loading="tableLoading">
      <el-table-column fixed prop="index" label="序号" width="80" align="center">
      </el-table-column>

      <el-table-column prop="CreateDate" label="入账时间" align="center" sortable>
      </el-table-column>
      <el-table-column prop="UserName" label="用户名" align="center" sortable>
      </el-table-column>

      <el-table-column prop="UserPhone" label="手机号码" align="center" sortable>
      </el-table-column>

      <el-table-column prop="UserOrgName" label="所属分公司" align="center" sortable>
      </el-table-column>
      <el-table-column prop="UserParentName" label="直属上级" align="center" sortable>
      </el-table-column>

      <el-table-column prop="DealState" label="交易状态" align="center" sortable>
        <template slot-scope="{ row }">
          <div>
            {{ findState(row.DealState) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="DealType" label="交易类型" align="center" sortable>
        <template slot-scope="{ row }">
          <div>
            {{ findType(row.DealType) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="DealBeMoney" label="交易前金额" align="center" sortable>
      </el-table-column>
      <el-table-column prop="DealAfMoney" label="交易后金额" align="center" sortable>
      </el-table-column>
      <el-table-column prop="DealMoney" label="当前收益金额" align="center" sortable>
        <template slot-scope="scope">{{scope.row.DealMoney|money}}</template>
      </el-table-column>
      <el-table-column prop="Remark" label="备注" align="center" sortable>
      </el-table-column>
    </el-table>
    <div class="m-t-2 flex flex-end">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchObj.PageIndex" :max-height="tableHeight" :page-size="searchObj.PageSize" :page-sizes="[10, 20, 50, 100, 200]" layout="total,sizes, prev, pager, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { GetDealStates, getList } from '@/api/FaniManage/userWall'
  import { getList as comGetlist } from '@/api/organization'
  import { getCodeMasterList } from '@/api/system/dictionary'
  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'incomeQuery',
    components: {},
    data() {
      //这里存放数据
      return {
        sum: 0,
        tableHeight: 0,
        comOptions: [],
        StateOptions: [],
        TypeOptions: [],
        tableLoading: false,
        searchObj: {
          UserName: "",
          UserPhone: '',
          ParentName: '',
          State: "",
          Type: "",
          timeValue: "",
          PageIndex: 1,
          PageSize: 10
        },
        pageTotal: 0,
        tableData: []
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    filters: {
      money(val) {
        return val = val.toFixed(2)
      },
      ToFixed(val) {
        return val.toFixed(2)
      }
    },
    //方法集合
    methods: {
      findState(e) {
        let Options = this.StateOptions
        let str = Options.find(item => e == item.EnumName)
        if (str) {
          return str.Desction
        } else {
          return '空值'
        }
      },
      findType(e) {
        let Options = this.TypeOptions
        let str = Options.find(item => e == item.Skey)
        if (str) {
          return str.Svalue
        } else {
          return '空值'
        }

      },
      async GetDealStatesFun() {
        let { Data } = await GetDealStates({})
        console.log(Data)
        this.StateOptions = this.$deepClone(Data)
      },
      async getComlist() {
        let { Data } = await comGetlist({ IsPaging: false })
        this.comOptions = this.$deepClone(Data)
      },
      async getCodeMasterList() {
        let { Data } = await getCodeMasterList({ IsPaging: false, SModule: "Wallet", SFunction: "Type" })
        this.TypeOptions = this.$deepClone(Data)
      },
      sortChange() {
        let SortType = false
        if (e.order == "ascending") {
          SortType = true
        }
        this.getListFun(e.prop, SortType)
      },
      getListFun() {
        const that = this
        this.sum = 0
        let obj = this.$deepClone(this.searchObj)
        this.tableLoading = true
        obj.timeValue && (obj['StartTime'] = obj.timeValue[0])//开始时间
        obj.timeValue && (obj['EndTime'] = obj.timeValue[1])//结束时间
        delete obj.timeValue
        getList(obj).then(res => {
          this.tableLoading = false
          let arr = this.$deepClone(res.Data)
          this.pageTotal = res.Total
          let currentPage = this.searchObj.PageIndex
          this.tableData = arr.map((item, index) => {
            for (let cell in item) {
              if (!item[cell] && this.$getType(item[cell]) !== 'Number') {
                item[cell] = '-'
              }
            }
            console.log(item)
            item = { ...item, index: (index + 1) + ((currentPage - 1) * 10), DealMoney: item.DealAfMoney - item.DealBeMoney }
            that.sum += item.DealMoney
            return item
          })
        }).catch(err => {
          this.tableLoading = false

          this.pageTotal = 0
          this.tableData = []
        })
      },
      handleCurrentChange(e) {
        this.searchObj.PageIndex = e
        this.getListFun()
      },
      //计算汇总
      getSummaries(param) {
        //这个页面需要汇总 发放人数 发放总金额
        const that = this
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          // if (index === 8) {
          //   sums[index] = '汇总';
          //   return;
          // }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value)) && (index == (columns.length - 1))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            try {
              var len = sums[index].toString().split('.')[1].length;
              if (len >= 2) {
                sums[index] = sums[index].toFixed(2)
              }
            } catch (error) { }
            that.sum = sums[index] + ' 元';
          } else {
            that.sum = '';
          }
        });

      },
      handleSizeChange(e) {
        this.searchObj.PageSize = e
        this.searchObj.PageIndex = 1
        this.getListFun()
      }

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.GetDealStatesFun()
      this.getCodeMasterList()
      this.getComlist()
      this.getListFun()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - this.$refs.myTable.$el.offsetTop - 150;
      })
      window.onresize = () => {
        this.tableHeight = window.innerHeight - this.$refs.myTable.$el.offsetTop - 150;
      }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
//@import url(); 引入公共css类
<style  scoped>
  .flex-end {
    justify-content: flex-end;
  }
  .font {
    font-size: 20px;
    font-weight: 500;
  }
</style>